<template>
	<div class="classify-info" id="classify-info">
		<div class="first-classify" v-for="(item, index) in list" :key="'item' + index">
			<div class="classify-type">
				<i></i>
				<p>{{ item.nextName }}</p>
				<i></i>
			</div>
			<div class="classify-detail">
				<div class="last-classify" v-for="(info, infoIndex) in item.list" :key="'info' + infoIndex" @click="toResult(info.sonName)">
					<div class="img-box">
						<img v-lazy="info.imgUrl" alt="" />
					</div>
					<p>{{ info.sonName }}</p>
				</div>
			</div>
		</div>
		<van-skeleton title :row="6" :loading="loading" v-for="i in 3" :key="'i' + i"></van-skeleton>
	</div>
</template>

<script>
import store from 'store';
import { Skeleton } from 'vant';
export default {
	name: 'ClassifyInfo',
	components: {
		'van-skeleton': Skeleton
	},
	data() {
		return {
			loading: true,
			list: [],
			cid: null
		};
	},
	created() {},
	methods: {
		getNextClassifyList(params) {
			this.cid = params.cid;
			document.getElementById('classify-info').scroll(0, 0);
			this.list = [];
			this.loading = true;
			this.$service.shopping.classify.nextClassify(params).then(res => {
				this.list = res;
				this.loading = false;
			});
		},
		toResult(val) {
			if (!this.cid) {
				this.cid = 0;
			}
			if (this.cid === 5) {
				this.cid = 3;
			} else if (this.cid === 7) {
				this.cid = 6;
			} else if (this.cid === 8) {
				this.cid = 9;
			} else if (this.cid === 13) {
				this.cid = 12;
			} else if (this.cid === 16) {
				this.cid = 15;
			}
			store.set('keyWord', val);
			this.$router.push({
				path: '/goods-result',
				query: {
					cid: this.cid
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.classify-info {
	width: 568px;
	padding: 18px 30px;
	background: $color-white;
	overflow: auto;
	/deep/.van-skeleton {
		padding: 0;
		margin-bottom: 30px;
		.van-skeleton__content {
			@include flexBox(flex-start, center, row, wrap);
			.van-skeleton__title {
				width: 100% !important;
				height: 30px;
				margin-bottom: 30px;
				border-radius: 8px;
			}
			.van-skeleton__row {
				width: 120px !important;
				height: 120px !important;
				margin: 0 22px 92px 22px;
				border-radius: 8px;
				position: relative;
				&::after {
					content: '';
					display: block;
					width: 120px;
					height: 30px;
					position: absolute;
					bottom: -50px;
					left: 0px;
					background-color: #f2f3f5;
					border-radius: 8px;
				}
			}
		}
	}
	.first-classify {
		margin-bottom: 40px;
		.classify-type {
			margin-bottom: 30px;
			@include flexBox(center, center);
			p {
				width: 200px;
				text-align: center;
				font-size: 28px;
				color: #000;
				font-weight: 600;
			}
			i {
				width: 98px;
				height: 2px;
				background: #d0d0d0;
			}
		}
		.classify-detail {
			@include flexBox(flex-start, null, null, wrap);
			.last-classify {
				width: 120px;
				margin-right: 58px;
				text-align: center;
				margin-bottom: 40px;
				&:nth-child(3n) {
					margin-right: 0;
				}
				.img-box {
					width: 120px;
					height: 120px;
					padding: 20px;
					img {
						max-width: 100%;
						max-height: 100%;
					}
				}
				p {
					color: #2b2b2b;
					font-size: 24px;
					margin-top: 12px;
				}
			}
		}
	}
}
</style>
